<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font属性</title>
    <style>
        p{
            font-size:20px;
        }
        .larger{
            font-size:larger;
        }
        .smaller{
            font-size: smaller;
        }
        .em{
            font-size:1em;
        }
        html{
            font-size:50px;
        }
        .rem{
            font-size: 1rem;
        }
        .ex{
            font-size:1ex;
        }
        .xxl{
            font-size:xx-large;
        }
        .xxs{
            font-size: xx-small;
        }
        .med{
            font-size: medium;
        }
        div{
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="pa">
    <p>p元素的font-size的大小：可爱（继承性）</p>
    <p class="em">em:可爱（继承性，是一个M的高度）</p>
    <p class="rem">rem:可爱(是html根元素的大小)</p>
    <p class="larger">larger:可爱（和父元素相比较）</p>
    <p class="smaller">smaller:可爱（和父元素相比较）</p>
    <p class="ex">ex:可爱x(是x的高度，父元素决定)</p>
    <p>浏览器默认大小的绝对字体大小</p>
    <p class="xxl">xx-large:可爱</p>
    <p class="xxs">xx-small:可爱</p>
    <p class="med">med:可爱</p>
</div>
</body>
</html>